﻿<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>Handsig</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<style>
			.dropdown-menu::before {
				content: '';
				display: inline-block;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-bottom: 6px solid #CCC;
				position: absolute;
				top: -7px;
				left: 9px;
			}
			.dropdown-menu::after {
				content: '';
				display: inline-block;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-bottom: 6px solid white;
				position: absolute;
				top: -6px;
				left: 9px;
			}
			html, body {
				height: 100%;
				background-color: transparent;
			}
			#mask {
				height: 100%;
				width: 100%;
			}
			#radio-list {
				-webkit-transition: all .3s;
				transition: all .3s;
				-webkit-transform: translateY(100%);
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-flex-flow: column;
				flex-flow: column;
				width: 90%;
				left: 5%;
				top: 20%;
				height: 80%;
				font-size: 16px;
				position: absolute;
			}
			#radio-list.in {
				-webkit-transform: translateY(0%);
			}
			#list .aui-form {
				border-radius: 5px;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			#list .aui-input-row:first-child:after {
				border-top: 0px solid #c8c7cc;
			}
			#list .aui-input-row:last-child:after {
				border-bottom: 0px solid #c8c7cc;
			}
			.center {
				margin-left: auto;
				margin-right: auto;
				text-align: center;
			}
			#list .aui-btn {
				padding: 10px 40px;
				margin-top: 10px;
				font-size: 16px;
			}
			/*单选、多选*/
			.aui-radio {
				width: 20px;
				height: 20px;
				margin: 10px 10px;
			}
			.aui-radio-name {
				margin-left: -4px;
				padding-left: 0;
				margin-right: 10px;
			}
			.aui-radio:checked:before, .aui-radio.aui-checked:before {
				left: 1px;
				top: -2px;
				content: "\e75b";
			}
			.aui-radio:checked:after, .aui-radio.aui-checked:after {
				left: 1px;
				top: -2px;
				content: "\e75b";
			}
			.aui-input-row {
				padding-left: 10px;
			}
			.aui-input-row:first-child, .aui-input-row:last-child {
				padding-left: 0px;
			}
		</style>
	</head>
	<body>
		<div id="mask">
			<div id="radio-list">
				<div class="aui-content list" id="list">
					<div class="aui-form center" id="menulist">
						<h3>筛选</h3>
						<div class="aui-input-row">
							<label class="aui-input-addon">姓名</label>
							<input type="text" class="aui-input" placeholder="签名姓名"/>
						</div>
						<div class="aui-input-row">
							<span class="aui-input-addon">类型</span>
							<div class="aui-pull-left">
								<input class="aui-radio aui-radio-info" type="radio" value='time' name="demo" checked>
								<div class="aui-radio-name">
									全部
								</div>
								<input class="aui-radio aui-radio-info" type="radio" value='time' name="demo">
								<div class="aui-radio-name">
									真实
								</div>
								<input class="aui-radio aui-radio-info" type="radio" value='time' name="demo">
								<div class="aui-radio-name">
									伪造
								</div>
							</div>
						</div>
						<div class="aui-input-row">
							<label class="aui-input-addon">开始</label>
							<input type="date" class="aui-input" placeholder="年/月/日" id="start">
						</div>
						<div class="aui-input-row">
							<label class="aui-input-addon">结束</label>
							<input type="date" class="aui-input" placeholder="年/月/日" id="end">
						</div>
						<div class="aui-input-row center">
							<div class="aui-btn " onclick="Search()" tapmode>
								搜索
							</div>
							&nbsp;&nbsp;&nbsp;
							<div class="aui-btn " onclick="api.closeFrame();" tapmode>
								取消
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/zepto.js"></script>
	<script type="text/javascript" src="../script/doT.min.js"></script>
	-
	<script type="text/javascript">
		function Close() {
			var $list = $('#radio-list');
			$list.removeClass('in');
			setTimeout(function() {
				api.closeFrame();
			}, 200);
		}

		function Search() {
			var list = $api.domAll('.aui-radio');
			for (var i = 0; i < list.length; i++)
				if (list[i].checked) {
					selIndex = i;
					break;
				}
			api.sendEvent({
				name : 'SignList',
				extra : {
					action : 'Search',
					kind : 1,
					selIndex : selIndex,
					start : {},
					end : {}
				}
			});
			setTimeout(function() {
				api.closeFrame();
			}, 100);
		}

		var kind = 1;
		var count = 0;
		var selIndex = 0;
		apiready = function() {
			kind = api.pageParam.kind;
			count = api.pageParam.count;
			var $list = $('#radio-list');
			$list.addClass('in');
			$(document.body).on('touchend', function(evt) {
				if (!$.contains($list[0], evt.target)) {
					$list.removeClass('in');
					setTimeout(function() {
						api.closeFrame();
					}, 100);
				}
			});
		};
	</script>
</html>